
// 1.
// var childNode = {
//     template: '<div>childNode</div>',
// };

// var parentNode = {
//     template:
//         '<div><child></child><child></child></div>',
//     components: {
//         'child': childNode, 
//     }
// };

// 2.静态props
// var childNode = {
//     template: '<div>{{myMessage}}</div>',
//     props: ['my-message'],
//     //props: ['myMessage'], 均可
// }

// var parentNode = {
//     template: `
//         <div>
//             <child my-message="aaa"></child>
//             <child my-message="bbb"></child>
//         </div>`,
//     components: {
//         child: childNode,
//     }
// }

// 3.动态props
// var childNode = {
//     template: '<div>{{myMessage}}</div>',
//     props: ['my-message'],
// }

// var parentNode = {
//     template: `
//         <div>
//             <child :my-message="data1"></child>
//             <child :my-message="data2"></child>
//         </div>`,
//     components: {
//         child: childNode,
//     },
//     data() {
//         return {
//             'data1': 'aaaa',
//             'data2': 'bbbb',
//         }
        
//     }
// }

// 4.传递数字
// var childNode = {
//     template: '<div>{{myMessage}}的类型是{{type}}</div>',
//     props: {
//         'myMessage': Number, // 此处设置后就只能接受数字，null表示任意类型
//     },
//     computed: {
//         type() {
//             return typeof this.myMessage;
//         }
//     }
// }

// var parentNode = {
//     template: `
//         <div>
//             <child :my-message="1"></child> // 使用v-bind，从而让它的值作为js表达式计算
//         </div>`,
//     components: {
//         child: childNode,
//     }
// }
// var parentNode = {
//     template: `
//         <div>
//             <child :my-message="data1"></child> // 使用v-bind，从而让它的值作为js表达式计算
//         </div>`,
//     components: {
//         child: childNode,
//     },
//     data() {
//         return {
//             'data1': 3, // 动态的props。在data属性设置对应的数字1
//         }
//     }
// }

// 5.自定义函数
// var childNode = {
//     template: '<div>{{myMessage}}</div>',
//     props: {
//         'myMessage':{
//             validator: function(value) {
//                 return value >= 10; // 不论value大于10还是小于10，都会返回value，小于10会在控制台报错
//             }
//         }
//     },
// }

// var parentNode = {
//     template: `
//         <div>
//             <child :my-message="data1"></child> 
//         </div>`,
//     components: {
//         child: childNode,
//     },
//     data() {
//         return {
//             data1: 10, // 动态的props。在data属性设置对应的数字1
//         }
//     }
// }

// 5.props的单向传播，只能父类影响子类，子类改变父类不变，控制台会报错
// var childNode = {
//     template: `
//     <div class="child">
//     <div>
//         <span>子组件数据</span>
//         <input v-model="childMsg">
//     </div>
//     <p>{{childMsg}}</p>
//     </div>
//     `,
//     props: ['childMsg']
// }

// var childNode = {
//     template: `
//     <div class="child">
//     <div>
//         <span>子组件数据</span>
//         <input v-model="temp">
//     </div>
//     <p>{{temp}}</p>
//     </div>
//     `,
//     props: ['childMsg'], // 这样就加载时初始化，不会动态改变
//     data() {
//         return {
//             temp: this.childMsg
//         }
//     },
// };
var childNode = {
    template: `
    <div class="child">
    <div>
        <span>子组件数据</span>
        <input v-model="temp">
    </div>
    <p>{{temp}}</p>
    </div>
    `,
    props: ['childMsg'], // computed，又动态咯，两种方式
    // 1.
    // computed: {
    //     temp() {
    //         return this.childMsg+'ssa'
    //     }
    // },

    // 2.
    data() {
        return {
            temp: this.childMsg
        }
    },
    watch: {
        childMsg() { //监听，方法名与props的属性一致，当属性只改变的时候，触发监听方法，而且改变子类，父类不受影响且控制台没错
            this.temp = this.childMsg
        }
    }
};
var parentNode = {
    template: `
    <div class="parent">
    <div>
        <span>父组件数据</span>
        <input v-model="msg">
    </div>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
    </div>
    `,
    components: {
        'child': childNode
    },
    data() {
        return {
            'msg': 'match'
        }
    }
};

new Vue({
    el: '#parent',
    components: {
        'parent': parentNode,
    }
});


// 设置属性的范围
// Vue.component('#example1', {
//     props: {
//         propA: null,
//         propB: Number,
//         propC: [String,Number],
//         propD: {
//             type: String,
//             required: true,
//         },
//         propE: {
//             type: Number,
//             default: 100,
//         },
//         propF: {
//             type: Object,
//             default: function () {
//                 return {message: 'hello'}
//             }
//         },
//         propG: {
//             validator: function(value) {
//                 return value > 10
//             }
//         }
//     }
// })

